<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />

    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <button></button>
    <userDetails
      :res="userDetailsData"
      v-if="userDetailsData.show"
      v-on:userDetailsCall="userDetailsCall"
    ></userDetails>
  </div>
</template>

<script>
import userDetails from "./cus/userDetails";
export default {
  components: {
    userDetails
  },
  data() {
    return {
      userDetailsData: {
        show: false
      },
      cardLab: "设为月卡",
      searchData: {
        nickName: '',
        phone: '',
        status: ''
      },
      searchForm: [
        { type: "input", placeholder: "用户昵称", prop: "nickName", width: 200 },
        { type: "input", placeholder: "手机号码", prop: "phone", width: 200 },
        // { type: "date", placeholder: "注册时间", prop: "date", width: 200 },
        {
          type: "select", placeholder: "启用状态", prop: "status", width: 200, options: [
            { label: '启用', value: 0 },
            { label: '禁用', value: 1 }
          ]
        },
      ],
      searchHandle: [
        { type: 'primary', label: '搜索', handle: e => this.getData(), },
        // {type:'primary',label:'重置', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "序号", prop: "userId", },
        { label: "用户昵称", prop: "nickName", },
        { label: "用户授权手机号", prop: "phone", },
        { label: "有效订单数量", prop: "orderNum", },
        { label: "总消费金额", prop: "consumeMoney", },
        // { label: "实际消费金额", prop: "isVip_des",  },
        { label: "充值金额", prop: "totalBalance", },
        { label: "剩余金额", prop: "balance", },
        { label: "充值赠送金额", prop: "giveMoney", },
        { label: "冻结押金", prop: "depositMoney", },
        { label: "注册时间", prop: "ctime", },
        { label: "状态", prop: "status", theme: e => e.status == 0 ? 'primary' : 'danger', type: "tag", formatter: e => e.status == 0 ? '启用' : '禁用' },
        { label: "月卡状态", prop: "guest", theme: e => e.guest == 0 ? 'primary' : 'danger', type: "tag", formatter: e => e.guest == 0 ? '否' : '是' },
        {
          label: "操作",
          type: "button",
          width: 100,
          btnList: [
            {
              label: "查看详情",
              type: "success",
              size: "mini",
              handle: (row) => {
                this.userDetailsData.id = row.userId;
                this.userDetailsData.show = true;
              }
            },
          ]
        },
        {
          label: "月卡",
          type: "button",
          width: 100,
          size: "mini",
          btnList: [
            {
              label: '设为',
              type: "text",
              size: "mini",
              handle: (row) => {
                this.setCard(row.userId)
              }
            },
            {
              label: '取消',
              type: "text",
              size: "mini",
              handle: (row) => {
                this.cancelCard(row.userId)
              }
            },
          ]
        },
      ],
      tableHandles: [

      ],
      pagination: { limit: 10, offset: 1, total: 1 },

      checkBox: []
    };
  },
  created() { },
  mounted() {
    this.getData();
  },
  methods: {
    userDetailsCall() {
      this.userDetailsData.show = false;
    },

    async setCard(id) {
      var res = await this.apis.setMonthCard({
        userId: id,
      });
      this.getData();
    },

    async cancelCard(id) {
      var res = await this.apis.cancelMonthCard({
        userId: id,
      });
      this.getData();
    },

    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.user_list2({
        phone: this.searchData.phone,
        nickName: this.searchData.nickName,
        status: this.searchData.status,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
      });

      var list = res.rows || [];

      list.map(res => {
        // console.log(res)
        res.btn_des = res.state == 34 ? '启用' : '禁用';
        res.isVip_des = res.isVip == 0 ? '否' : res.isVip == 1 ? '是' : ''
      });

      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }

  },
};
</script>

<style scoped lang="scss">
</style>
